<template>
<div>
    <div style="display: flex;flex-direction:row;flex-wrap:wrap">
        <div>
            <el-switch style="margin:5px;height:32px;" v-model="status" active-text="已启动" inactive-text="已停止" @change="handleStatusChange" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </div>

        <div style="display: flex;flex-direction:row;flex-wrap:no-wrap">
            <el-button type="primary" size="small" @click="refresh" style="margin: 5px;">搜索</el-button>
            <el-button type="primary" size="small" @click="handleOpenDrawer" style="margin:5px;" v-if="status==true">添加</el-button>
        </div>
    </div>

    <el-table :data="data" style="width: 100%" stripe :height="500" v-loading="loading">
        <el-table-column prop="jobName" label="任务" align="center" width="150">
        </el-table-column>
        <el-table-column prop="triggerName" label="触发器" v-if="!smallPaginition" align="center" width="150">
        </el-table-column>
        <el-table-column prop="cron" label="CRON" width="180" align="center" v-if="!smallPaginition">
        </el-table-column>
        <el-table-column prop="className" label="任务路径" v-if="!smallPaginition" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" width="100">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.status=='NORMAL'" size="mini">正常</el-tag>
                <el-tag type="warning" v-if="scope.row.status=='PAUSED'" size="mini">暂停</el-tag>
                <el-tag type="success" v-if="scope.row.status=='COMPLETE'" size="mini">完成</el-tag>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center" v-if="!smallPaginition">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleStartTask(scope.row)" v-if="scope.row.status=='PAUSED' &&status==true">启动</el-button>
                <el-button type="text" size="small" @click="handleStopTask(scope.row)" v-if="scope.row.status=='NORMAL'&&status==true">暂停</el-button>
                <el-button type="text" size="small" style="color:#E6A23C" v-if="status==true" @click="handleOpenDrawer(scope.row)">修改</el-button>
                <el-button type="text" size="small" style="color:red" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <el-pagination  @size-change="refresh" @current-change="refresh" style="margin-top: 10px;" :current-page.sync="page.current" :page-sizes="[5, 10, 20, 50]" :page-size.sync="page.pageSize" :layout="layout" :total="total" :small="smallPaginition">
    </el-pagination>

    <el-drawer title="添加任务" :with-header="false" :visible.sync="drawer" direction="rtl" :before-close="handleDrawerClose" :show-close="false" :wrapperClosable="false" size="300px">
        <div style="margin:50px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" label-position="top">
                <el-form-item label="任务名称" prop="jobName">
                    <el-input :disabled="!isAdd" v-model="ruleForm.jobName" style="width: 200px;"></el-input>
                </el-form-item>

                <el-form-item label="CRON" prop="cron">
                    <el-popover v-model="cronPopover">
                        <cron @change="changeCron" @close="cronPopover=false" i18n="cn"></cron>
                        <el-input slot="reference" @click="cronPopover=true" v-model="ruleForm.cron" placeholder="请输入定时策略" style="width: 200px;"></el-input>
                    </el-popover>
                </el-form-item>
                <el-form-item label="触发器器名称" prop="triggerName">
                    <el-input :disabled="!isAdd" v-model="ruleForm.triggerName" style="width: 200px;"></el-input>
                </el-form-item>

                <el-form-item label="任务类名" prop="className">
                    <el-input :disabled="!isAdd" v-model="ruleForm.className" style="width: 200px;" placeholder="请输入任务全类名" clearable></el-input>
                </el-form-item>
                <el-form-item label="生效时间" prop="startTime">
                    <el-date-picker style="width: 200px;" v-model="ruleForm.startTime" type="datetime" placeholder="选择生效时间" value-format="yyyy-MM-dd HH:mm:ss" clearable>
                    </el-date-picker>

                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-date-picker style="width: 200px;" v-model="ruleForm.endTime" type="datetime" placeholder="选择结束时间" value-format="yyyy-MM-dd HH:mm:ss" clearable>
                    </el-date-picker>
                </el-form-item>

                <div style="display: flex;flex-direction:row;flex-wrap:no-wrap">
                    <el-button type="primary" @click="handleAddTask" size="small" style="margin:5px" v-if="isAdd">添加</el-button>
                    <el-button type="primary" @click="handleUpdateTask" size="small" style="margin:5px" v-else>添加</el-button>
                    <el-button type="primary" @click="handleDrawerClose" size="small" style="margin:5px">取消</el-button>
                </div>

            </el-form>
        </div>

    </el-drawer>

</div>
</template>

<script>
import {
    getPageList,
    getSchdulerStatus,
    startSchduler,
    stopSchduler,
    deleteTask,
    startTask,
    stopTask,
    addTask,
    updateTask
} from "@/api/quartz"
import {
    cron
} from 'vue-cron';
export default {
    name: "quartz",
    components: {
        cron
    },
    data() {
        return {
            cronPopover: false,
            isAdd: true,
            ruleForm: {
                "className": "",
                "cron": "",
                "jobName": "",
                "triggerName": "",
                "startTime": "",
                "endTime": ""
            },
            rules: {
                jobName: [{
                    required: true,
                    message: '请输入任务名称',
                    trigger: 'blur'
                }],
                triggerName: [{
                    required: true,
                    message: '请输入触发器名称',
                    trigger: 'blur'
                }],
                cron: [{
                    required: true,
                    message: '请设置cron表达式',
                    trigger: 'blur'
                }],
                className: [{
                    required: true,
                    message: '请设置任务全类名',
                    trigger: 'blur'
                }],
                startTime: [{
                    required: true,
                    message: '请设置任务生效时间',
                    trigger: 'blur'
                }],
                endTime: [{
                    required: true,
                    message: '请设置任务结束时间',
                    trigger: 'blur'
                }],
            },
            drawer: false,
            schdulerStatus: "",
            status: true,
            loading: true,
            data: [],
            total: 0,
            page: {
                "current": 1,
                "pageSize": 10,
            },
            layout: "total, sizes, prev, pager, next, jumper",
            smallPaginition: false,

        }
    },
    created() {
        this.refresh()
    },
    mounted() {
        this.handleResize();
        window.addEventListener('resize', this.handleResize);

    },
    methods: {
        handleUpdateTask() {
            this.$refs["ruleForm"].validate(valid => {
                if (valid) {
                    updateTask(this.ruleForm).then(res => {
                        if (res.code == 200) {
                            this.$message.success("修改成功")
                            this.handleDrawerClose()
                            setTimeout(() => {
                                this.refresh()
                            }, 1000)

                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            })
        },
        changeCron(val) {
            this.ruleForm.cron = val

            this.$refs.ruleForm.validateField("cron")

        },
        handleDrawerClose() {
            this.drawer = false
            this.ruleForm.className = ""
            this.ruleForm.cron = ""
            this.jobName = ""
            this.ruleForm.triggerName = ""
            this.ruleForm.startTime = ""
            this.ruleForm.endTime = ""
        },
        handleOpenDrawer(row) {
            if (row.id) {
                this.isAdd = false
                this.ruleForm = JSON.parse(JSON.stringify(row))
            } else {
                this.isAdd = true
            }
            this.drawer = true;
        },
        handleAddTask() {
            this.$refs["ruleForm"].validate(valid => {
                if (valid) {
                    addTask(this.ruleForm).then(res => {
                        if (res.code == 200) {
                            this.$message.success("添加成功")
                            this.handleDrawerClose()
                            setTimeout(() => {
                                this.refresh()
                            }, 1000)

                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            })
        },
        handleDelete(row) {
            deleteTask(row).then(res => {
                if (res.code == 200) {
                    this.$message.success("已删除")
                    this.refresh()
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        handleStatusChange(status) {
            console.log()
            if (status) {
                startSchduler().then(res => {
                    if (res.code == 200) {
                        this.$message.success("调度器已开启")
                    } else {
                        this.$message.error(res.message)
                    }
                })
            } else {
                stopSchduler().then(res => {
                    if (res.code == 200) {
                        this.$message.success("调度器关闭")
                    } else {
                        this.$message.error(res.message)
                    }
                })
            }

        },
        handleStartTask(row) {
            startTask(row).then(res => {
                if (res.code == 200) {
                    this.$message.success("已启动")
                    this.refresh()
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        handleStopTask(row) {
            stopTask(row).then(res => {
                if (res.code == 200) {
                    this.$message.success("已停止")
                    this.refresh()
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        handleRefresh() {
            this.refresh();
        },
        refresh() {
            this.loading = true
            getSchdulerStatus().then(res => {
                if (res.code == 200) {
                    this.schdulerStatus = res.message
                    if (this.schdulerStatus == 'start' || this.schdulerStatus == 'standby') {
                        this.status = true
                    } else {
                        this.status = false
                    }
                } else {
                    this.$message.error(res.message)
                }
            })
            getPageList(this.page).then(res => {
                if (res.code == 200) {
                    this.data = res.data.records
                    this.total = res.total
                } else {
                    this.$message.error(res.message)
                }
            }).finally(() => {
                this.loading = false
            })
        },
        handleResize() {
            if (document.body.clientWidth < 768) {
                this.smallPaginition = true
                this.layout = "prev, pager, next"

            } else {
                this.smallPaginition = false
                this.layout = "total, sizes, prev, pager, next, jumper"

            }
        },
    },
};
</script>

<style>
</style>
